<script setup>
import useDragAndDrop from '../ts/useDnD'
import * as defaultNodeBackground from './ts/default-node-style'
const { onDragStart } = useDragAndDrop()
</script>

<template>
  <aside>
    <div class="description">You can drag these nodes to the pane.</div>

    <div class="nodes">
    <div class="dnd_vue-flow__node--http-in" :style="{backgroundColor: defaultNodeBackground.HttpInBackground}" :draggable="true" @dragstart="onDragStart($event, 'http-in')">Http In Node</div>
    <div class="dnd_vue-flow__node--http-out" :style="{backgroundColor: defaultNodeBackground.HttpOutBackground}" :draggable="true" @dragstart="onDragStart($event, 'http-out')">Http Out Node</div>
    <div class="dnd_vue-flow__node--agent" :style="{backgroundColor: defaultNodeBackground.AgentBackground}" :draggable="true" @dragstart="onDragStart($event, 'agent')">Agent Node</div>
    <div class="dnd_vue-flow__node--tool-execute" :style="{backgroundColor: defaultNodeBackground.ToolExecuteBackground}" :draggable="true" @dragstart="onDragStart($event, 'tool-execute')">Tool Execute Node</div>
    <div class="dnd_vue-flow__node--tool" :style="{backgroundColor: defaultNodeBackground.ToolBackground}" :draggable="true" @dragstart="onDragStart($event, 'tool')">Tool Node</div>

    <div class="dnd_vue-flow__node--agent-list-task" :style="{backgroundColor: defaultNodeBackground.AgentListTaskBackground}" :draggable="true" @dragstart="onDragStart($event, 'agent-list-task')">Agent List Task Node</div>
    <div class="dnd_vue-flow__node--project-process" :style="{backgroundColor: defaultNodeBackground.ProjectProcessBackground}" :draggable="true" @dragstart="onDragStart($event, 'project-process')">Project Process Node</div>

    <div class="dnd_vue-flow__node--http-audio-in" :style="{backgroundColor: defaultNodeBackground.HttpAudioInBackground}" :draggable="true" @dragstart="onDragStart($event, 'http-audio-in')">Http Audio In Node</div>
    <div class="dnd_vue-flow__node--http-image-in" :style="{backgroundColor: defaultNodeBackground.HttpImageInBackground}" :draggable="true" @dragstart="onDragStart($event, 'http-image-in')">Http Image In Node</div>
    <div class="dnd_vue-flow__node--stt" :style="{backgroundColor: defaultNodeBackground.SttBackground}" :draggable="true" @dragstart="onDragStart($event, 'stt')">STT Node</div>
    
    <div class="dnd_vue-flow__node--message-history" :style="{backgroundColor: defaultNodeBackground.MessageHistoryBackground}" :draggable="true" @dragstart="onDragStart($event, 'message-history')">Message History Node</div>
    <div class="dnd_vue-flow__node--message-concat" :style="{backgroundColor: defaultNodeBackground.MessageConcatBackground}" :draggable="true" @dragstart="onDragStart($event, 'message-concat')">Message Concat Node</div>
    <div class="dnd_vue-flow__node--manual-str" :style="{backgroundColor: defaultNodeBackground.ManualStrBackground}" :draggable="true" @dragstart="onDragStart($event, 'manual-str')">Manual Str Node</div>
    <div class="dnd_vue-flow__node--clear" :style="{backgroundColor: defaultNodeBackground.ClearBackground}" :draggable="true" @dragstart="onDragStart($event, 'clear')">Clear Node</div>

    <div class="dnd_vue-flow__node--http" :style="{backgroundColor: defaultNodeBackground.HttpBackground}" :draggable="true" @dragstart="onDragStart($event, 'http')">Http Node</div>
    <div class="dnd_vue-flow__node--agent-if" :style="{backgroundColor: defaultNodeBackground.AgentIfBackground}" :draggable="true" @dragstart="onDragStart($event, 'agent-if')">Agent If Node</div>

    </div>
  </aside>
</template>


<style scoped>

.dnd_vue-flow__node--http {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}

.dnd_vue-flow__node--tool {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}

.dnd_vue-flow__node--tool-execute {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}

.dnd_vue-flow__node--agent {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}
.dnd_vue-flow__node--agent-if {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}

.dnd_vue-flow__node--stt {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}
.dnd_vue-flow__node--http-out {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}

.dnd_vue-flow__node--http-in {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}
.dnd_vue-flow__node--http-audio-in {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}
.dnd_vue-flow__node--http-image-in {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}
.dnd_vue-flow__node--message-history {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}
.dnd_vue-flow__node--clear {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}
.dnd_vue-flow__node--agent-list-task {
    display: block;
    gap:8px;
    padding:8px 16px;
    border-radius:8px;
}


</style>